<template>
	<view>
		<mescroll-body-diy ref="mescrollRef" @init="mescrollInit" top="0" :down="downOption" @down="downCallback"
			@up="upCallback">
			<view>
				<ren-calendar ref='ren' :collapsible='false' :markDays='markDays' :headerBar='true'
					@onDayClick='onDayClick' @current-month-day='onNext'></ren-calendar>
			</view>

			<view class="courseList">
				<view v-for='itm in classInfoList' class="course-item" :class='itm.isSign==0?"pending":"cardpadding"'>
					<view class="first">
						<view class="time">{{itm.startTime}}</view>
						<view class="time">{{itm.endTime}}</view>
						<!-- <view :class='"colorStatus"+itm.isLine'>{{itm.isLine==0?'已结束':"待上课"}}</view> -->
					</view>
					<view class="second">
						<view class="title">{{itm.title}}</view>
						<view class="detail">
							<view style="display: flex; align-items: center;">
								<image :src="itm.image==null?avatar:itm.image" class="tAvatar"></image>
								<view>
									<view style="font-size: 26rpx;">{{itm.name==null?"暂未设置教师":itm.name}}</view>
									<view style="font-size: 24rpx;" v-if="itm.role=='1'">主教老师</view>
									<view style="font-size: 24rpx;" v-if="itm.role=='2'">助教</view>
									<view style="font-size: 24rpx;" v-if="itm.role=='3'">班长</view>
								</view>
							</view>
							<view v-if='itm.isSign==0' class="signBtn" @tap="jumpsign(itm.id)">
								去打卡
							</view>
							<view v-else style="color: #999999;">
								非打卡时间
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body-diy>
	</view>
</template>

<script>
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/xinlang/mescroll-body.vue";
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			RenCalendar,
			MescrollBodyDiy
		},
		computed: mapState(['loginState', 'uerInfo']),
		data() {
			return {
				avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/default.png',
				curDate: '',
				markDays: ['2021-11-15', '2021-11-01'],
				courseList: [ //status:-1已结束：  1上课中    0待上课
				],
				choose: '',
				signFlag: false,
				newDate: '',
				MonthDate: '',
				classInfoList: '',
				isShowSchedule: true,
				listHeigth: 0,
				courseStatus: '', //课程状态 -1 已结束 0 待上课
				fistState: true,
				downOption: {
					auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
			}
		},
	
		onShow() {
			if (!this.loginState) {
				uni.navigateTo({
					url: '../mine/auth'
				})
				return
			}else{
				this.getMonth();
				this.initDate()
			}
		
			// this.getScheduleByDate(this.newDate)
			// this.getScheduleByMonth(this.newDate)
			//
		},
		methods: {
			jumpsign(id){
				uni.navigateTo({
					url:'../index/course_detail?id='+id
				})
			},
			downCallback() {
				setTimeout(() => {
					this.$api.getScheduleByMonth({
						date: this.newDate
					}).then((res) => {
						if (res.data.success) {
							this.markDays = res.data.dataMap
							this.mescroll.endSuccess(this.markDays.length, true)

						} else {
							this.mescroll.endErr();
						}
						this.getScheduleByDate(this.newDate)
					})

				}, 500);

			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.mescroll.endSuccess(10)
				if(this.loginState){
					this.getScheduleByDate(this.newDate)
					this.getScheduleByMonth(this.newDate)
				}
			
			},
			openSign(classInfo) {
				if (classInfo.isSign == -1) {
					uni.showToast({
						title: '不在打卡时间范围内',
						duration: 1000,
						icon: "none"
					});
				} else {
					uni.navigateTo({
						url: '../shopList/product-activity-info?id=' + classInfo.id
					})
				}


			},
			initDate() {
				//当前时间
				this.newDate = new Date().format("yyyy-MM-dd hh:mm:ss");
				this.MonthDate = new Date().format("yyyy-MM-dd hh:mm:ss");
			},
			//获取日历信息(红点)
			getScheduleByMonth(MonthDate) {
				this.$api.getScheduleByMonth({
					date: MonthDate
				}).then((res) => {
					this.markDays = res.data.dataMap
					return res

				})

			},
			//获取日程
			getScheduleByDate(date) {
				this.$api.getScheduleByDate({
					date: date
				}).then((res) => {
					this.classInfoList = res.data.dataMap
					this.isShowSchedule = true
					if (this.classInfoList.isSign == -1) {
						this.signFlag = false
					} else {
						this.signFlag = true
					}
					//判断时间是否是前一天还是后一天
					let pDate = new Date(date).getTime()
					if (pDate < new Date().getTime() + 1000) {
						//过去时间
						this.courseStatus = -1
					} else {
						this.courseStatus = 0
					}
					console.log(JSON.stringify(res))

				})
			},
			onSignIn(payload, date) {
				this.isShowSchedule = false //用于动画

				const {
					checked,
					year,
					month,
					day
				} = payload
				if (date == undefined) {
					date = `${year}-${month}-${day}`
				}
				console.log('时间：' + date)
				this.choose = date
				this.getScheduleByDate(date);

			},
			onNext(payload) {
				let date = payload + '-01'
				let date2 = payload + '-1'

				this.choose = date2
				this.getScheduleByMonth(date)
				this.getScheduleByDate(date)
			},


			onDayClick(data) {
				this.curDate = data.date;
				//TODO::渲染课程
				this.getScheduleByDate(data.date + " 00:00:00")
			},
			getMonth() {
				
				var today = new Date();
				var year = today.getFullYear();
				var month = today.getMonth() + 1;
				this.curDate = year + "-" + month;
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(248, 248, 248);
	}
	.cardpadding{
		.second {
			background-color: #FFFFFF  !important;
			color: #000000;
			box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
		}
		
	}
	.pending {
		.second {
			background-color: rgb(255, 154, 51) !important;
			color: white;

			.detail {
				color: white !important
			}
		}
		
	}

	.course-item {
		margin: 10px 0;
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
		align-items: center;

		.first {
			flex: 1;
			text-align: center;

			.time {
				font-weight: bold;
				font-size: 28rpx;
			}
		}

		.second {
			.title {
				font-weight: bold;
				font-size: 28rpx;
			}

			padding: 15px;
			box-sizing: border-box;
			background-color: white;
			border-radius: 10px;
			flex:4;

			.detail {
				display: flex;
				margin-top: 10px;
				align-items: center;
				justify-content: space-between;
				color: gray;
			}
		}

		.tAvatar {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-right: 10px;
		}

		.signBtn {
			color: white;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 15px;
			padding: 5px 20px;
		}
	}
</style>
